<template>
  <el-dialog
    ref="dialogRef"
    :title="title"
    :visible="visible"
    :width="width"
    :modal="modal"
    :modal-append-to-body="modalAppendToBody"
    :append-to-body="appendToBody"
    :before-close="beforeClose"
    :destroy-on-close="destroyOnClose"
    :close-on-click-modal="false"
    @open="options => $emit('open', options)"
    @opened="() => $emit('opened')"
    @close="onClose"
    @closed="() => $emit('closed')"
  >
    <div v-if="$slots.title" slot="title">
      <slot name="title"></slot>
    </div>

    <slot></slot>

    <div v-if="$slots.footer" slot="footer" class="dialog-footer">
      <slot name="footer"></slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'gis-dialog',
  props: {
    title: {
      type: String,
      default: '',
    },
    visible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: '720px',
    },
    modal: {
      type: Boolean,
      default: false,
    },
    beforeClose: {
      type: Function,
    },
    modalAppendToBody: {
      type: Boolean,
      default: true,
    },
    appendToBody: {
      type: Boolean,
      default: false,
    },
    destroyOnClose: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {

    };
  },
  methods: {
    onClose() {
      this.$emit('update:visible', !this.visible);
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped></style>

